<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
</head>
<body>
  <div id="app">
    <!-- 条件选择框 -->
    <div class="query">
      <span>翻译成的语言：</span>
      <select v-model="obj.lang">
        <option value="italy">意大利</option>
        <option value="english">英语</option>
        <option value="german">德语</option>
      </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
      <div class="input-wrap">
        <textarea v-model="obj.words"></textarea>
        <span><i>⌨️</i>文档翻译</span>
      </div>
      <div class="output-wrap">
        <div class="transbox">{{ result }}</div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    // 需求: 输入内容 修改语言 都实时翻译
    const app = new Vue({
      el: '#app',
      data: {
        // words: ''
        obj: {
          words: '黑马程序员',
          lang: 'english'
        },
        // 翻译结果
        result: '',
        // timer: null // 延时器id
      },
      // 具体讲解: 1)watch语法  2)具体业务实现
      watch: {
        // watch完整写法
        obj: {
          // 深度监视
          deep: true,
          // 立刻执行,一进入页面,handler就立刻执行一次
          immediate: true,
          handler(newValue) {
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: newValue
              })
              this.result = res.data.data
              console.log('watch侦听器', res)
            }, 3000)
          }
        },

        // 该方法会在数据变化时调用执行
        // words(newValue, oldValue) {
        //   console.log('变化了', newValue, oldValue)
        // }

        // async 'obj.words'(newValue, oldValue) {
        //   // console.log('变化了', newValue, oldValue)

        //   // 防抖: 延迟执行 -> 干啥事先等一等,延迟一会,一段时间内没有再次触发,才执行
        //   clearTimeout(this.timer)
        //   this.timer = setTimeout(async () => {
        //     const res = await axios({
        //       url: 'https://applet-base-api-t.itheima.net/api/translate',
        //       params: {
        //         words: newValue
        //       }
        //     })
        //     this.result = res.data.data
        //     console.log('watch侦听器', res)
        //   }, 300)
        // }
      }
    })
  </script>
</body>
</html>